<div class="city__ds">
    <no-info ni-top="300px" ng-if="panel.empty"></no-info>
    <loading load-top="300px" ng-if="panel.load"></loading>
    <div class="city__ds-home" ng-if="page[control.page]=='home'">
        <div class="city__ds-hh">
            <p class="title">驾校指数</p>
            <a id="ds-h1" href="#" class="filter" focus-helper focus-id="focus.ci"
               ng-keydown="move($event, openFilter)">高级筛选</a>
            <p class="separator"></p>
        </div>
        <div class="city__ds-hb">
            <ul class="city__ds-list">
                <li class="city__ds-list-item" ng-repeat="l in data.curList track by $index">
                    <a id="ds-{{$index}}" href="#" focus-helper focus-id="'ds-'+control.listIndex"
                       ng-keydown="move($event, gotoDetail)">
                        <p class="area">{{l.areaName}}</p>
                        <p class="title">{{l.schoolName}}</p>
                        <p class="percent"
                           ng-class="{'percent-1': l.passRate<90&&l.passRate>80, 'percent-2':l.passRate<80}">
                            {{l.passRate}}%</p>
                        <p class="separator"></p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="city__ds-hf">
            <p ng-class="control.da"></p>
        </div>
    </div>
    <div class="city__ds-detail" ng-if="page[control.page]=='detail'">
        <div class="city__ds-dh" ng-if="!panel.load && !panel.empty">
            <p class="title">{{data.history.name}}</p>
            <p class="address">{{data.history.address}}</p>
            <p class="percent" ng-class="{'percent-1': data.history.curContent.passRate<90&&data.history.curContent.passRate>80,
                                            'percent-2': data.history.curContent.passRate<80}">
                {{data.history.curContent.passRate}}%
            </p>
            <p class="notice">本月通过</p>
            <p class="separator"></p>
        </div>
        <div class="city__ds-db" ng-class="{'detail-lm': panel.detail==0,'detail-rm': panel.detail==1}"
             ng-if="!panel.load && !panel.empty">
            <div class="city__ds-db1">
                <div class="top">
                    <p class="notice">培训质量得分</p>
                    <p class="time">{{data.history.curContent.month | mul_date:3}}</p>
                </div>
                <div class="left">
                    <canvas id="ds-canvas" width="640" height="288"></canvas>
                    <div class="notice">
                        <p class="mark">{{data.history.curContent.totalMark}}</p>
                        <p class="label">总分</p>
                    </div>
                </div>
                <div class="right">
                    <ul class="right-list">
                        <li>
                            <p class="value">{{data.history.curContent.passRate}}%</p>
                            <p class="key">考试合格率</p>
                        </li>
                        <li>
                            <p class="value">{{data.history.curContent.returnRate}}</p>
                            <p class="key">学员回访</p>
                        </li>
                        <li>
                            <p class="value">{{data.history.curContent.crimeRate}}%</p>
                            <p class="key">交通违法率</p>
                        </li>
                        <li>
                            <p class="value">{{data.history.curContent.trafficRate}}%</p>
                            <p class="key">交通肇事率</p>
                        </li>
                    </ul>
                </div>
                <div class="separator"></div>
                <p class="arrow" ng-class="{'arrow--focus': control.la==1}"></p>
            </div>
            <div class="city__ds-db2">
                <p class="title">历史成绩</p>
                <table class="history">
                    <tr>
                        <th>月份</th>
                        <th>合格率</th>
                        <th>违法率</th>
                        <th>肇事率</th>
                        <th>总分</th>
                    </tr>
                    <tr ng-repeat="h in data.history.content">
                        <td>{{h.month}}</td>
                        <td>{{h.passRate}}%</td>
                        <td>{{h.crimeRate}}%</td>
                        <td>{{h.trafficRate}}%</td>
                        <td>{{h.totalMark}}</td>
                    </tr>
                </table>
                <p class="arrow" ng-class="{'arrow--focus': control.ra==1}"></p>
            </div>
        </div>
    </div>
    <div class="city__mask city__ds-mask" ng-if="control.mask">
        <p class="title">高级筛选</p>
        <p class="notice">【确认】键进行查询，【返回】键取消操作</p>
        <div class="separator"></div>
        <div class="city__ds-mb">
            <a id="ds-mk1" href="#" focus-helper focus-id="focus.ci" ng-keydown="move($event, schoolSearch)"></a>
            <a id="ds-mk2" href="#" focus-helper focus-id="focus.ci" ng-keydown="move($event, schoolSearch)"></a>
            <ul class="area">
                <li ng-repeat="a in curCity"
                    ng-class="{'level1': $index==control.area, 'level2': $index-control.area==1||$index-control.area==-1, 'level3': $index==control.area+2}"
                    ng-hide="$index<control.area-1||$index>control.area+2">
                    {{a.showName}}
                </li>
            </ul>
            <ul class="percent">
                <li ng-repeat="r in rate"
                    ng-class="{'level1': $index==control.rate, 'level2': $index-control.rate==1||$index-control.rate==-1, 'level3': $index==control.rate+2}"
                    ng-hide="$index<control.rate-1||$index>control.rate+2">
                    {{r.display}}
                </li>
            </ul>
        </div>
    </div>
</div>